<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    form{
      width: 516px;
      height: 392px;
      background-color: #f5f5f5;
      margin: auto;
      margin-top: 100px;
      padding: 30px 50px;
      text-align: center;
      
    }
    form>input{
      width: 310px;
      height: 38px;
      background-color: #fff;
      /* 取消激活框 */
      outline: none;
      border: 2px solid #e9e9e9;
      box-sizing: border-box;
      text-indent: 10px;
      font-size: 13px;
      color: #000;
      font-weight: bold;
    }
    form>h3{
      font-size: 22px;
      line-height: 1;
    }
    form>p{
      font-size: 13px;
      line-height: 52px;
    }
    form>button{
      margin-top: 10px;
      display: inline-block;
      width: 310px;
      height: 38px;
      border: 0;
      background-color: #157efb;
      color:#f5f5f5;
      font-size: 16px;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <form action="" >
    <h3>欢迎注册</h3>
    <p>提示:注册账号的同时系统会自动生成钱包</p>
    <input type="text" name="username" id="" placeholder="用户名">
    <input type="password" name="password" id="" placeholder="密码">
    <input type="password" name="rpassword" id="" placeholder="密码">
    <input type="text" name="nickname" id="" placeholder="昵称">
    <button type="submit">提交</button>
    <span></span>
  </form>
  
</body>
<script src="./axios.js"></script>
<script>
  let oUsername= document.querySelector('[name=username]')
  let oPassword= document.querySelector('[name=password]')
  let oRpassword= document.querySelector('[name=rpassword]')
  let oNickname= document.querySelector('[name=nickname]')
  // let oSubmit= document.querySelector('[type=submit]')
  let oForm= document.querySelector('form')
  let oSpan= document.querySelector('span')

  oForm.onsubmit=function(e){
    //e事件对象
    //1.阻止表单的默认提交
    e.preventDefault();
    // console.log(e)
    //2.收集用户信息
     let username=oUsername.value
     let password=oPassword.value
     let rpassword=oRpassword.value
     let nickname=oNickname.value

     //3.非空效验(如果有一个为null,就提示 填写完成的信息,终止程序运行)
     if(!username || !password || !rpassword || !nickname){
      return alert('请填写完信息')
     }
     //4.密码效验(如果password与rpassword不一致,就 提示信息 密码不一致,终止程序继续运行)
     if(password !=rpassword){
      return alert('密码不一致')
     }

     //5.发送axios请求
     axios({
      url:'http://localhost:8888/users/register',
      method:'post',
      headers:{
        "content-type":"application/x-www-form-urlencoded"
      },
      data:{
        username:username,
        password,
        rpassword,
        nickname
      }
     }).then(res =>{
      console.log(res)
      //根据状态码判断注册是否成功 和 失败
      if (res.data.code !=1) {
        oSpan.innerText='亲,注册失败,请重新注册'
        oSpan.style.color='red'
        //终止继续向下执行
        return;
      }
      //如果执行到这,就表示注册成功
      alert('注册成功')
      //跳转到首页
      location.href='03-login.html'
     })
  }
</script>
</html>